<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div
      v-loading="isloading"
      class="banner"
    >
      <div
        style="margin-top: 20px"
      >
        <el-button
          class="btn"
          @click="add"
        >
          新增模板
        </el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="templateType"
          label="模板类型"
          width="180"
        >
          <template #default="{ row }">
            {{ newYjType(row.templateType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="transportType"
          label="运送类型"
          width="180"
        >
          <template #default="{ row }">
            {{ newYsType(row.transportType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="associatedCityList"
          label="关联城市"
          width="180"
        >
          <template #default="{ row }">
            <span>{{ newCityType(row.associatedCityList) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="firstWeight"
          label="首重"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="continuousWeight"
          label="续重"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="lightThrowingCoefficient"
          label="轻抛系数"
          width="350"
        >
        </el-table-column>

        <el-table-column
          fixed="right"
          width="100px"
          align="center"
          prop="address"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="edit(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              style="color:red"
              @click="del(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增编辑的弹层 -->
      <addFreight
        ref="form"
        :show-dialog.sync="showDialog"
        :yj-type="yjType"
        :ys-type="ysType"
        :city-type="cityType"
        :newdata.sync="formData"
        @Success="getfreightManageList"
      ></addFreight>
    </div>
  </div>
</template>

<script>
import { freightManageList, freightManageDelete } from '@/api/transit'
import EnumObj from '@/utils/freightManage'
import addFreight from './components/freight-add'
export default {
  components: {
    addFreight
  },
  data() {
    return {
      tableData: [],
      showDialog: false,
      isloading: false,
      yjType: EnumObj.yjType,
      ysType: EnumObj.ysType,
      cityType: EnumObj.cityType,
      formData: {}
    }
  },

  created () {
    this.getfreightManageList()
  },
  methods: {

    // 打开弹窗
    add() {
      this.showDialog = true
      console.log(this.yjType)
    },
    // 删除
    async del(id) {
      this.$confirm('您确定要删除吗？')
        .then(async() => {
          await freightManageDelete(id)
          this.$message.success('删除成功')
          this.getfreightManageList()
        })
        .catch()
    },
    // 渲染数据
    async getfreightManageList() {
      this.isloading = true
      const res = await freightManageList()
      this.tableData = res.data
      this.isloading = false
    },
    // 邮寄
    newYjType(type) {
      return this.yjType.find((item) => item.value === type) ? this.yjType.find((item) => item.value === type).label : ''
    },
    // 城市
    newCityType(arr) {
      const resArr = []
      arr.forEach(item => {
        const res = this.cityType.find(v => v.value === +item) ? this.cityType.find(v => v.value === +item).label : ''
        resArr.push(res)
      })
      return resArr.join()
    },
    // 运送
    newYsType(type) {
      return this.ysType.find((item) => item.value === type) ? this.ysType.find((item) => item.value === type).label : ''
    },

    // 关闭
    closeDialog() {
      this.showDialog = false
      this.formData = {}

      this.getfreightManageList()
    },
    // 编辑
    edit(val) {
      this.showDialog = true
      console.log(val)
      this.formData = val
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 30px;

  .banner{
    padding: 20px;
    background-color: #fff;
    .btn{
      margin-bottom: 20px;
      background: #e15536;
      color: #fff;
    }
    .form{
      // padding-left: 50px !important;
      padding-right: 50px !important;
      .biaoqian{
        color: #000;
        font-style: normal;
      }
    }
  }
}
</style>
